<template>
  <div class="padding-left-right-20 padding-top-10">
    <div class="steps">
      <div :class="'step cursor-pointer ' + (step == index + 1 ? 'pass' : '')" v-for="(item, index) in contractStageList" :key="index" @click="stepFn(index + 1)">
        <div class="title t-center font-size-16">{{ item.name }}（{{ item.name }}）</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'mine',
    data() {
      return {
        contractStageList: [{ name: '步骤1' }, { name: '步骤2' }, { name: '步骤3' }, { name: '步骤4' }],
        step: 3,
      };
    },

    mounted() {
      this.getContractCount();
    },

    methods: {
      stepFn(index) {
        this.step = index;
      },

      nextStep() {
        this.step === this.steps.length ? (this.step = 1) : this.step++;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .steps {
    width: 100%;
    margin: 0 auto 0;
    overflow: hidden;
    .step {
      float: left;
      width: 25%;
      color: #fff;
      font-size: 18px;
      background: #999999;
      //   margin-left: -4px;
      clip-path: polygon(8% 0, 100% 0, 92% 50%, 100% 100%, 8% 100%, 0 50%);
      .title {
        margin-left: 20px;
        line-height: 40px;
      }
    }
  }
  .step:first-child {
    margin-left: 0;
    clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
  }
  .step:last-child {
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%);
  }
  .pass {
    background: #409eff !important;
    color: #fff !important;
  }
</style>
